<template>
  <div class="app-container">
    <!-- 这是司机作业管理 -->
    <div data-v-c23b2bcc="" class="el-card search-card-box is-never-shadow">
      <div class="el-card__body">
        <!---->
        <el-form :inline="true"  class="demo-form-inline">
          <el-form-item label="作业编号">
            <el-input v-model="parameter.driverWorkSheetJobNumber" placeholder="任务编号"></el-input>
          </el-form-item> 
          <el-form-item label="司机姓名">
            <el-input v-model="parameter.driverName" placeholder="司机名称"></el-input>
          </el-form-item>
          <el-form-item label="作业状态">
            <el-select v-model="parameter.driverWorkStatus" >
               <el-option label="请选择作业状态" value="0"></el-option>
              <el-option label="待提货" value="1"></el-option>
              <el-option label="在途" value="2"></el-option>
              <el-option label="已交付" value="3"></el-option>
              <el-option label="已作废" value="4"></el-option>
            </el-select>
          </el-form-item>
          <div class="ysrw">
          <el-form-item label="运输任务编号" >
            <el-input v-model="parameter.transportationNumber" placeholder="请运输任务编号"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="danger" @click="findBycondition()">搜索</el-button>
            <el-button @click="aa()">重置</el-button>
          </el-form-item>
          </div>
        </el-form>
      <!-------------------------------------------------------------------------------------------------------- -->
      </div>
    </div>
    <!-- 三连表分页 -->
    <div>
      <el-table
        class="tableA"
        style="width: 100%"
        align="center"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        :data="DriverWorklist"
      >
        <el-table-column label="序号" prop="transportationId" width="100">
        </el-table-column>
        <el-table-column
          label="作业编号"
          prop="transshipmentTmsDriverWorkSheet.driverWorkSheetJobNumber"
          width="200"
        >
        </el-table-column>
        <el-table-column
          label="司机姓名"
          prop="transshipmentTmsDriverDetails.driverName"
          width="200"
        >
        </el-table-column>
        <el-table-column
          label="调度机构(所属转运中心)"
          prop="transportationSchedulingMechanism"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="车牌号码"
          prop="transportationLicensePlateNumber"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="计划发车时间"
          prop="transportationScheduleDepartureTime"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="实际到达时间"
          prop="actualtimeofarrival"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="运输任务编号"
          prop="transportationNumber"
          width="100"
        >
        </el-table-column>
        <el-table-column
          label="作业状态"
          prop="transshipmentTmsDriverWorkSheet.driverWorkStatus"
          width="100"
        >
        </el-table-column>
      </el-table>
      <!-- ----------------------------------------------------------------------------------------- -->
      <!-- 分页对应的数据 -->
      <el-pagination
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="parameter.page"
        :page-sizes="[2, 4, 6, 8]"
        :pager-count="9"
        background
        :page-size.sync="parameter.num"
        layout="total, sizes, prev, pager, next, jumper"
      >
      </el-pagination>
 

    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //loading加载element-ui提供的加载事件
      loading: true,
      //表格data 循环的数据
      DriverWorklist: [],
      //分页对应的数据 page num （id，name）对应条件
      parameter: {
        page: 1,
        num: 2,
        driverWorkSheetJobNumber: "",
        driverName: "",
        driverWorkStatus: "",
        transportationNumber: "",
      },
      // 分页总条数
      total: 0,
    };
  },
  methods: {
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    //分页条件查询
    findBycondition() {
      this.load();
    },

    //条件分页查询
    load() {
     // console.log(this.parameter) 判断条件查询 null ''
      this.axios.post("/api/transshipment-tms-transportation-task-management/DriverWorkPageBycondition", this.parameter).then((res) => {
        this.DriverWorklist = res.data.list;
        this.parameter.page = res.data.pageNum;
        this.parameter.num = res.data.pageSize;
        this.total = res.data.total;
        console.log(res.data.list)
        //加载样式
        setTimeout(() => {
          this.loading = false;
        }, 1000);
      });
    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title == "添加分类") {
            this.axios.post("/api/jzxx/addjzxx", this.ruleForm).then((res) => {
              if (res.data > 0) {
                this.$message({
                  type: "success",
                  message: "添加成功!",
                });
                this.dialogFormVisible = false;
                this.load();
              }
            });
          } else {
            this.resetForm.dwid = this.axios
              .post("/api/jzxx/updatejzxx", this.ruleForm)
              .then((res) => {
                if (res.data > 0) {
                  this.$message({
                    type: "success",
                    message: "修改成功!",
                  });
                  this.dialogFormVisible = false;
                  this.load();
                }
              });
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
     resetForm() {
      this.parameter = [];
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields();
    // },
  },
  created() {
    this.load();
  },
};
</script>
 
<style scoped>
.ysrw{
  position: relative;
  right: 226px;  
}
.app-container {
  padding: 20px;
  background-color: #abb7d8;
}
.tableA {
  margin: 20px;
  margin-left: -0.5px;
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #8baaf2;
}
.bg-purple {
  background: #e5e9f2;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>